<template>
  <div>
    <div>
      <van-row style="background-color: #f56a00">

      <van-col span="22">

        <van-search
            shape="round"
            background="#f56a00"
            placeholder="请输入搜索关键词"
        />
      </van-col>

      <van-col span="2">
        <br>
        <van-icon name="add-o"/>
      </van-col>
</van-row>

    </div>


    <van-tabs v-model:active="active">
      <van-tab v-for="itme in daohang" :key="itme" :title="itme">
        <div v-if="active==0">
          aaaaaaa
        </div>
        <div v-if="active==1">
          <div v-for="(item, index) in tui" :key="index">
            <van-row style="background-color: #f7f7f7">
              <br>
              <van-col span="1" style="background-color: #f7f7f7">&nbsp;<br><br> &nbsp;</van-col>
              <van-col span="22">
                <div v-if="item.kind==0" style="background-color: #ffffff;border-radius: 30px;">
                  <van-row>
                    <van-col span="4">
                      <van-image
                          round
                          width="5rem"
                          height="5rem"
                          :src="item.user.headimg"
                      />
                    </van-col>
                    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <van-col span="16">
                      <br>
                      {{ item.user.username }}
                      <br>
                      {{ dateFormat(item.addtime) }}
                    </van-col>
                  </van-row>
                  <br>
                  <van-row @click="toessay(item.id)">
                    <van-col span="1"></van-col>
                    <van-col span="13">
                      <van-text-ellipsis
                          rows="2"
                          :content="item.content"
                          expand-text="展开"
                          collapse-text="收起"
                      />
                    </van-col>
                    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <van-col span="5">
                      <van-image
                          width="100"
                          height="100"
                          :src="item.imglist"
                      />
                    </van-col>
                    <van-col span="1"></van-col>
                  </van-row>

                  <van-row>
                    <van-col span="8">
                      &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                      分享
                    </van-col>
                    <van-col span="8">
                      <van-icon name="chat-o" size="20px"/>
                      665
                    </van-col>
                    <van-col span="8">
                      <van-icon name="thumb-circle-o" size="20px"/>
                      318
                    </van-col>
                  </van-row>
                  <br>

                </div>
                <!--                展示视频-->
                <div v-if="item.kind==1">
                  <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
                  <div class="video-item" style="background-color: #ffffff">
                    <van-row>
                      <van-col span="1"></van-col>
                      <van-col span="11">

                        <div class="video-info">
                          <span>{{ item.title }}</span>
                          <br>
                        </div>
                      </van-col>
                      <van-col span="10">
                        <div class="video-thumbnail" @click="goToVideoDetail(item)">
                          <br>
                          <video controls width="150" height="90" ref="videoRef" style="right: 50px">
                            <source src="http://localhost:8000/upload/video/kunkun.mp4" type="video/mp4">
                            您的浏览器不支持 HTML5 video 标签。
                          </video>
                          <!--              <span class="video-duration">{{ video.duration }}</span>-->
                        </div>
                      </van-col>
                      <br>
                      <van-col span="22">

                      <span>&nbsp;&nbsp;&nbsp;&nbsp; {{
                          item.num
                        }}播放量 &nbsp;&nbsp;&nbsp;&nbsp; {{ dateFormat(item.addtime) }}</span>
                      </van-col>

                    </van-row>
                  </div>

                  <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
                </div>

                <!--展示动态-->
                <div v-if="item.kind==2">
                  <div style="background-color: #ffffff;border-radius: 30px;">
                    <van-row>
                      <van-col span="4">
                        <van-image
                            round
                            width="5rem"
                            height="5rem"
                            :src="item.user.headimg"
                        />
                      </van-col>
                      &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                      <van-col span="16">
                        <br>
                        {{ item.user.username }}
                        <br>
                        {{ dateFormat(item.addtime) }}
                      </van-col>
                    </van-row>
                    <br>
                    <van-row>
                      <van-col span="1"></van-col>
                      <van-col span="22">
                        <a style="color:#0066cc;">{{ item.topic.title }}</a>{{ item.content }}
                      </van-col>
                      <van-col span="1"></van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" v-for="(itmeimg,key) in item.imglist" :key="key">
                        <van-image
                            width="100"
                            height="100"
                            :src="itmeimg"
                        />
                      </van-col>
                    </van-row>

                    <van-row>
                      <van-col span="8">
                        &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                        分享
                      </van-col>
                      <van-col span="8">
                        <van-icon name="chat-o" size="20px"/>
                        665
                      </van-col>
                      <van-col span="8">
                        <van-icon name="thumb-circle-o" size="20px"/>
                        318
                      </van-col>
                    </van-row>
                    <br>
                  </div>
                </div>
                <br>

              </van-col>
              <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
            </van-row>
          </div>
        </div>
        <div v-if="active==2">
          <div class="header">
            <span class="category">时事</span>
            <span class="title">热榜</span>
            <span class="update - time">更新时间 {{ updateTime }}</span>
          </div>
          <div style="background-color: white;height: 200px" class="hot-list">
            <div v-for="(item, index) in re" :key="index" class="list-item">
              <div class="rank">{{ index + 1 }}</div>
              <div class="content">
                <div class="title">{{ item.title }}</div>
                <div class="info">
                  <span class="views">{{ item.num }}万阅读</span>
                  <span class="source">{{ item.source }}</span>
                </div>
              </div>
              <img :src="item.imglist" alt="thumbnail" class="thumbnail">
            </div>
          </div>
        </div>

      </van-tab>
    </van-tabs>
    <br>
    <br>
  </div>
</template>
<script setup>
// main.js 或 setup 文件中
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";

let router = useRouter()

const active = ref(1)
const daohang = ref([
  "关注",
  "推荐",
  "热榜",
  "视频",
  "健康",
  "科技",
  "图片"
])
const tui = ref()//推荐数据
const re = ref([])

// 推荐
const tuijian = () => {
  axios.get("http://127.0.0.1:8000/home/tui/").then(res => {
    tui.value = res.data.data
    console.log(tui.value)
  })
};
// 热榜
const Hot = () => {
  axios.get("http://127.0.0.1:8000/home/hot/").then(res => {
    re.value = res.data.data
  })
}
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}

const toessay = (id) => {
  router.push(`essaydetail?id=${id}`)
}


onMounted(() => {
  tuijian()
  Hot()
})
</script>
<style scoped>
.hot- list {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.category {
  color: #e54d42;
  font-weight: bold;
}

.title {
  font-weight: bold;
}

.update- time {
  color: #999;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eaeaea;
}

.rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e54d42;
  color: white;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
}

.content {
  flex: 1;
}

.title {
  font-size: 16px;
  margin-bottom: 5px;
}

.info {
  color: #999;
  fon-size: 14px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  margin-left: 10px;
}

</style>
